<template>
    <div>
        <div>
            <el-form :inline="true" :model="queryParams" class="demo-form-inline" align="left">
                <el-form-item label="名称">
                    <el-input v-model="queryParams.name" placeholder="名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="_search">查询</el-button>
                    <el-button type="primary" @click="_reset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div>
            <el-table
                :data="initTableData"
                style="width: 100%;"
                row-key="id"
                node-key='id'
                default-expand-all
                >
                <el-table-column
                    prop="name"
                    label="名称">
                    <template slot-scope="scope">
                        <div style='display:inline-block'>
                            <el-checkbox v-model="scope.row.checked"  :key="scope.row.id" @change="_checkChangehandler(scope.row)"></el-checkbox>
                            <span>{{scope.row.name}}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="atr"
                    label="属性">
                </el-table-column>
                <el-table-column
                    prop="price"
                    label="价格">
                </el-table-column>
            </el-table>
        </div>
    </div>    
</template>
<script>
export default {
    name: 'TreeTable',
    props: {
        queryParams: {
            type: Object,
            default: () => {}
        },
        tableData: {
            type: Array,
            default: () => []
        },
        apiName:{
            type:Function
        },
        multiple:{
            type:Boolean,
            default:false
        }
    },
    data(){
        return {
            initTableData: [],
            checked: true,
            flag: true,
            newData: null
        }
    },
    methods: {
    //     /**查询开始 */
        _resetComm(obj) {
            if(typeof obj == 'string'){
                obj = JSON.parse(obj)
            }
            if(JSON.stringify(obj) == '{}'){
                return
            }
            for(let i in obj){
                if(obj[i] instanceof Array){
                    obj[i] = []
                }
                else if(obj[i] instanceof Object){ //
                    this._resetComm(obj[i])
                }
                else if(typeof obj[i] == 'boolean'){
                    obj[i] = false
                }
                else {
                    obj[i] = ''
                }
            }
        },
        _reset() {
            this._resetComm(this.queryParams)
        },
        _search() {
            let val = this.queryParams.name 
            //待完善，具体应用时需和进一步完善
            let param = {
                name : val
            }
            this.apiName(param).then(res => {
                // res = res && res.rspBody ? res.rspBody : []
                // this.initTableData = JSON.parse(JSON.stringify(res))
                // this.tableData = JSON.parse(JSON.stringify(res))
            })
        },
        /**查询结束 */
        /**树结构开始 */
        _restSelect(data, dataRange, allData) {
            for(let i=0;i<dataRange.length;i++) {
                if(dataRange[i].id !== data.id) {
                    this.$set(dataRange[i], 'checked', false);
                }
                if(dataRange[i].children) {
                    this._restSelect(data, dataRange[i].children, allData)
                }
            }
        },
        _checkChangehandler(data) {
            // console.log(arguments)
            let allData = this.initTableData
            if(!this.multiple){//单选
                if(data.checked){
                    this._restSelect(data, allData, allData)
                }
            }else{
                /**
                * 1.全选实现
                * 父级选中-所有子孙都选中
                * 父级取消选中-所有子孙均取消
                */
                this._chooseAll(data)
                /*2.子项存在未选中状态，其父级呈现未选中状态*/
                
                if(!data.checked && data.parentId){
                    this._inverseCancelChooseAll(data.parentId, allData, allData)
                }
                /**
                 * 3.子项全部勾选时，其父级呈现选中状态
                 * 当前项的兄弟元素 后代元素 均为选中状态  其父级元素呈现选中状态
                 */
                if(data.checked && data.parentId) {
                    this._inverseChooseAll(data.parentId, allData, allData)
                }
            }
        },
        _chooseAll(data) {
            // debugger
            let _this = this
            let checked = data.checked
            if(data.children && data.children.length > 0) {
                let children = data.children
                children.forEach(element => {
                    _this.$set(element, 'checked', checked);
                    _this._chooseAll(element)
                });
            }
        },
        // 子项存在未选中状态，其父级呈现未选中状态
        /**
         * id:要匹配的id 
         * data:当前匹配id的数据范围
         * allData:整个树结构数据
         * */
        _inverseCancelChooseAll(id,data,allData) {
            for(let i=0; i<data.length; i++) {
                if(data[i].id === id){
                    this.$set(data[i], 'checked', false);
                    if(data[i].parentId){
                        this._inverseCancelChooseAll(data[i].parentId,allData, allData)
                    }else {
                        return 
                    }
                }else{
                    if(data[i].children && data[i].children.length > 0) {
                        this._inverseCancelChooseAll(id,data[i].children, allData)
                    }
                }
                
            }
        },
        // 子项全部勾选时，其父级呈现选中状态
        _inverseChooseAll(parentId, data, allData) {
            if(!parentId) {
                return false
            }
            data = data ? data : []
            for(let i=0; i<data.length; i++) {
                if(data[i].id === parentId) {
                    //判断该层级下的子集是否均勾选 如果是 该层选中  然后继续找该层的父级id
                    let flag = true
                    data[i].children = data[i].children ? data[i].children : []
                    for(let j=0; j<data[i].children.length; j++) {
                        if(!data[i]["children"][j].checked) {
                            flag = false
                            return
                        }
                    }
                    if(flag) {
                        this.$set(data[i], 'checked', true);
                        if(data[i].parentId) {
                            this._inverseChooseAll(data[i].parentId, allData, allData)
                        }
                    }
                }else{
                    if(data[i].children && data[i].children.length > 0) {
                        this._inverseChooseAll(parentId, data[i].children, allData)
                    }
                }
                
            }
        },
        /**树结构结束 */
    },
    created() {
        this.initTableData = this.tableData ? JSON.parse(JSON.stringify(this.tableData)) : []
    },
    watch: {

    }
}
</script>
<style>
.tableheader{
    background:#ccc;
}
</style>



